<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Eddy Malou Soundboard</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen"> 
		<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
		<link href="custom.css" rel="stylesheet">
	</head>
	<body>
		<!-- Barre de navigation -->
		<div class="navbar navbar-inverse">
			<div class="navbar-inner">
				<!-- Bouton apparaissant sur les résolutions mobiles afin de faire apparaître le menu de navigation -->
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a class="brand" href="#">Eddy Malou Soundboard</a>
				<!-- Structure du menu -->
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a href="#">Accueil</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- Sounds -->
		<div class="sounds" id="conteneurBoutons"></div>

		<!-- Dr DRE -->
		<div class="sounds">
			<h1>Dr Dre : Still D.R.E. Player</h1>
			<div class="row show-grid">
				<div class="span2"><a class="btn btn-success btn-large" id="playDRE"><i class="icon-white icon-play"></i> Play</a></div>
				<div class="span2"><a class="btn btn-warning btn-large" id="pauseDRE"><i class="icon-white icon-pause"></i> Pause</a></div>
				<div class="span2"><a class="btn btn-danger btn-large" id="stopDRE"><i class="icon-white icon-stop"></i> Stop</a></div>
			</div>
		</div>
			
		<!-- Footer -->
		<footer class="footer"><p>Papelou Production</p></footer>

		<!-- Intégration de la libraire jQuery -->
		<script src="bootstrap/js/jquery-1.10.1.js"></script>
		<!-- Intégration de la libraire de composants du Bootstrap -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!-- Code spécifique -->
		<script src="custom.js"></script>
	</body>
</html>